import React, { useState, useEffect } from 'react';

const BasicMenuTest = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [loginForm, setLoginForm] = useState({ email: 'admin@example.com', password: '123456' });
  const [menuItems, setMenuItems] = useState([]);
  const [loading, setLoading] = useState(false);
  const [message, setMessage] = useState('');

  // 检查登录状态
  useEffect(() => {
    const token = localStorage.getItem('admin_token');
    if (token) {
      setIsLoggedIn(true);
    }
  }, []);

  // 模拟登录
  const handleLogin = async () => {
    try {
      setLoading(true);
      setMessage('正在登录...');
      
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      // 模拟成功登录
      localStorage.setItem('admin_token', 'mock-token-123');
      setIsLoggedIn(true);
      setMessage('登录成功！');
      
      // 模拟获取菜单数据
      setTimeout(() => {
        setMenuItems([
          { id: 1, name: '叉烧包', name_en: 'Char Siu Bao', price: 8.8 },
          { id: 2, name: '牛肉面', name_en: 'Beef Noodles', price: 12.8 },
          { id: 3, name: '鸡肉饭', name_en: 'Chicken Rice', price: 10.5 }
        ]);
        setMessage('菜单数据加载完成！');
      }, 500);
      
    } catch (error) {
      setMessage('登录失败: ' + String(error));
    } finally {
      setLoading(false);
    }
  };

  const handleLogout = () => {
    localStorage.removeItem('admin_token');
    setIsLoggedIn(false);
    setMenuItems([]);
    setMessage('已退出登录');
  };

  if (!isLoggedIn) {
    return (
      <div style={{ padding: '40px', maxWidth: '400px', margin: '0 auto' }}>
        <div style={{
          background: 'white',
          padding: '30px',
          borderRadius: '12px',
          boxShadow: '0 4px 12px rgba(0,0,0,0.1)'
        }}>
          <h2 style={{ textAlign: 'center', marginBottom: '30px', color: '#333' }}>菜单管理系统</h2>
          
          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '8px', color: '#666' }}>邮箱:</label>
            <input
              type="email"
              value={loginForm.email}
              onChange={(e) => setLoginForm({...loginForm, email: e.target.value})}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #ddd',
                borderRadius: '6px',
                fontSize: '14px'
              }}
            />
          </div>
          
          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '8px', color: '#666' }}>密码:</label>
            <input
              type="password"
              value={loginForm.password}
              onChange={(e) => setLoginForm({...loginForm, password: e.target.value})}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #ddd',
                borderRadius: '6px',
                fontSize: '14px'
              }}
            />
          </div>
          
          <button
            onClick={handleLogin}
            disabled={loading}
            style={{
              width: '100%',
              padding: '12px',
              background: loading ? '#ccc' : '#1890ff',
              color: 'white',
              border: 'none',
              borderRadius: '6px',
              fontSize: '16px',
              cursor: loading ? 'not-allowed' : 'pointer'
            }}
          >
            {loading ? '登录中...' : '登录'}
          </button>
          
          {message && (
            <div style={{
              marginTop: '15px',
              padding: '10px',
              background: '#f0f0f0',
              borderRadius: '4px',
              fontSize: '14px',
              textAlign: 'center'
            }}>
              {message}
            </div>
          )}
        </div>
      </div>
    );
  }

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{
        background: 'white',
        borderRadius: '12px',
        padding: '24px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div style={{ 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          marginBottom: '24px'
        }}>
          <h1 style={{ margin: 0, color: '#333' }}>菜单管理</h1>
          <button
            onClick={handleLogout}
            style={{
              padding: '8px 16px',
              background: '#ff4d4f',
              color: 'white',
              border: 'none',
              borderRadius: '6px',
              cursor: 'pointer'
            }}
          >
            退出登录
          </button>
        </div>
        
        {message && (
          <div style={{
            marginBottom: '20px',
            padding: '12px',
            background: '#e6f7ff',
            border: '1px solid #91d5ff',
            borderRadius: '6px',
            color: '#0050b3'
          }}>
            {message}
          </div>
        )}
        
        <div style={{ marginBottom: '20px' }}>
          <h3>菜单统计</h3>
          <p>总菜品数量: <strong>{menuItems.length}</strong></p>
        </div>
        
        {menuItems.length > 0 ? (
          <div>
            <h3>菜品列表</h3>
            <div style={{ display: 'grid', gap: '12px' }}>
              {menuItems.map((item) => (
                <div
                  key={item.id}
                  style={{
                    padding: '16px',
                    background: '#fafafa',
                    border: '1px solid #f0f0f0',
                    borderRadius: '8px',
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                  }}
                >
                  <div>
                    <div style={{ fontWeight: 'bold', fontSize: '16px' }}>
                      {item.name}
                    </div>
                    {item.name_en && (
                      <div style={{ color: '#666', fontSize: '14px' }}>
                        {item.name_en}
                      </div>
                    )}
                  </div>
                  {item.price && (
                    <div style={{
                      background: '#52c41a',
                      color: 'white',
                      padding: '4px 8px',
                      borderRadius: '4px',
                      fontSize: '14px',
                      fontWeight: 'bold'
                    }}>
                      ¥{item.price}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        ) : (
          <div style={{
            textAlign: 'center',
            padding: '40px',
            color: '#999'
          }}>
            <p>暂无菜单数据</p>
            <p style={{ fontSize: '14px' }}>请上传Excel文件导入菜单数据</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default BasicMenuTest;